<!DOCTYPE html>
<html lang='en'>

<head>
    <title>Robot</title>
    <link rel="icon" href="/images/lychee.png" sizes="64x64">
    <link rel="shortcut icon" href="/images/lychee.ico" type="image/x-icon">
    <link rel="stylesheet" href='/static/style.css' />
</head>

<body>
    <header>
        <!-- <div class="logo">ATUP</div> -->
        <div class="dropdown">
            <span class="dropdown-link">Foreign robots</span>
            <div class="dropdown-content" id="Foreign">
                <!-- Add more carousel items as needed -->
            </div>
        </div>
        <br />
        <div class="dropdown">
            <span class="dropdown-link">Domestic robots</span>
            <div class="dropdown-content" id="Domestic">
                <!-- Add more carousel items as needed -->
            </div>
        </div>
        <br />
        <div class="dropdown">
            <span class="dropdown-link">Startups</span>
            <div class="dropdown-content" id="Startups">
                <!-- Add more carousel items as needed -->
            </div>
        </div>
        <br />
        <div class="dropdown">
            <span class="dropdown-link">异构人形</span>
            <div class="dropdown-content" id="Isomerism">
            </div>
        </div>
        <br />
        <div class="dropdown">
            <span class="dropdown-link">Datasets</span>
            <div class="dropdown-content" id="Datasets">
                <!-- Add more carousel items as needed -->
            </div>
        </div>
    </header>

    <div class="carousel-container">
        <div class="carousel-slide" id="carouselSlide">
            <!-- Add more carousel items as needed -->
        </div>
        <button class="arrow left" id="prevBtn">&#10094;</button>
        <button class="arrow right" id="nextBtn">&#10095;</button>
        <div class="carousel-info">
            <span id="currentItem">0</span> / <span id="totalItems">0</span>
        </div>
    </div>
    <script src="/static/script.js"></script>

    <div class="table-container">
        <table id="dynamicTable">
            <!-- Table rows will be added here dynamically -->
        </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>


        ///////////////////////////////// 
        var carouselSlide = document.getElementById('carouselSlide');
        var prevBtn = document.getElementById('prevBtn');
        var nextBtn = document.getElementById('nextBtn');
        var currentIndex = 0;
        var items = [];
        var currentItemSpan = document.getElementById('currentItem');
        var totalItemsSpan = document.getElementById('totalItems');

        function updateCarousel() {
            carouselSlide.innerHTML = '';
            items.forEach(function (item) {
                var itemElement = document.createElement('div');
                itemElement.className = 'carousel-item';
                itemElement.innerHTML = item.content;
                carouselSlide.appendChild(itemElement);
            });
            carouselSlide.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
            currentItemSpan.textContent = currentIndex + 1; // 显示当前项目的序号，从1开始
            totalItemsSpan.textContent = items.length; // 显示总量
        }

        function slide(step) {
            currentIndex = (currentIndex + step + items.length) % items.length;
            updateCarousel();
        }

        function addCarouselItem(content) {
            items.push({ content: content });
            updateCarousel();
        }

        // Event listeners
        prevBtn.addEventListener('click', function () { slide(-1); });
        nextBtn.addEventListener('click', function () { slide(1); });


        ///////////////////////////////// 

        function sendLabels(labels) {
            $.ajax({
                url: '/get_data',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ 'labels': labels }),
                success: function (response) {
                    // console.log(JSON.stringify(response));
                    // 将返回的字典内容显示在页面上
                    var resultHtml = '<thead> <tr> <th>name</th> <th>value</th> <th>reference</th></tr></thead><tbody>';
                    items = [];
                    currentIndex = 0;
                    for (var label in response) {
                        if ("company" === label) continue;
                        if (label === "name") continue;
                        if (label === "video") {
                            for (var vid in response[label]) {
                                if (response[label][vid] == '') continue;
                                // console.log(JSON.stringify(response[label][vid]));
                                var vidHtml = '';
                                vidHtml += '<iframe src="https://player.bilibili.com/player.html?bvid=';
                                vidHtml += response[label][vid] + '&danmaku=0&high_quality=1&autoplay=1"';
                                // vidHtml += 'scrolling="no"  border="0" frameborder="no" framespacing="0" allowfullscreen="true">';
                                vidHtml += '>';
                                vidHtml += '</iframe>';
                                addCarouselItem(vidHtml);
                            }
                            continue;
                        }
                        if (label === "photo") {
                            for (var vid in response[label]) {
                                if (response[label][vid] == '') continue;
                                addCarouselItem('<img src=' + response[label][vid] + '  alt=" ">');
                            }
                            continue;
                        }
                        resultHtml += '<tr> <td>' + label + '</td> <td>';
                        var res1 = response[label][0];
                        var res2 = response[label][1];
                        // console.log(JSON.stringify(response[label]));
                        resultHtml += res1 + '</td> <td>';
                        if (res2 !== "") {
                            // var aurl = '<a href=' + res2 + '>' + res2 + '</a>';
                            // console.log(JSON.stringify(aurl));
                            resultHtml += '<a href=' + res2 + '>url</a>';
                        }
                        // console.log(JSON.stringify(response[label]));
                        resultHtml += '</td> </tr>';
                    }
                    resultHtml += '</tbody>';
                    $('#dynamicTable').html(resultHtml);
                    addCarouselItem('<iframe src="https://gkjohnson.github.io/urdf-loaders/javascript/example/bundle/index.html"></iframe>');
                }
            });
        }

    </script>
</body>

</html>